<template>
	<div class="first">
		<!-- 头像 -->
		<!-- <van-image
			  round
			  width="3rem"
			  height="3rem"
			  fit="cover"
			  src="https://img01.yzcdn.cn/vant/cat.jpeg"
		/> -->
		<!-- 搜索框 -->
		<form action="/">								<!-- 回车触发搜索方法 -->
		  <van-search
		    v-model="value"
		    show-action
		    placeholder="请输入搜索关键词"
		    @search="onSearch"
		    @cancel="onCancel"
		  />
		</form>
		<!-- 轮播图 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
			<van-swipe-item><img src="@/assets/gushan.jpeg"></van-swipe-item>
			<van-swipe-item><img src="@/assets/lingyu.jpeg"></van-swipe-item>
			<van-swipe-item><img src="@/assets/bireds.jpeg"></van-swipe-item>
			<van-swipe-item><img src="@/assets/mifeng.jpeg"></van-swipe-item>
		</van-swipe>
		<h4>我是商品</h4>
		<!-- <img src="@/assets/video/comment.mp4" alt="视频"> -->
		<!-- 视频展示部分 -->              
		<div class="my_video">
		    <video-player
		      class="video-player vjs-custom-skin"
		      ref="videoPlayer"
		      :playsinline="true"
		      :options="options"
		      @play="onPlayerPlay($event)"
		      @pause="onPlayerPause($event)"
		      @ended="onPlayerEnded($event)"
		      @waiting="onPlayerWaiting($event)"
		      @playing="onPlayerPlaying($event)"
		      @loadeddata="onPlayerLoadeddata($event)"
		      @timeupdate="onPlayerTimeupdate($event)"
		      @canplay="onPlayerCanplay($event)"
		      @canplaythrough="onPlayerCanplaythrough($event)"
		      @statechanged="playerStateChanged($event)"
		      @ready="playerReadied"
		    >
		    </video-player>
		</div>
		<div class="my_video">
		    <video-player
		      class="video-player vjs-custom-skin"
		      ref="videoPlayer"
		      :playsinline="true"
		      :options="options"
		      @play="onPlayerPlay($event)"
		      @pause="onPlayerPause($event)"
		      @ended="onPlayerEnded($event)"
		      @waiting="onPlayerWaiting($event)"
		      @playing="onPlayerPlaying($event)"
		      @loadeddata="onPlayerLoadeddata($event)"
		      @timeupdate="onPlayerTimeupdate($event)"
		      @canplay="onPlayerCanplay($event)"
		      @canplaythrough="onPlayerCanplaythrough($event)"
		      @statechanged="playerStateChanged($event)"
		      @ready="playerReadied"
		    >
		    </video-player>
		</div>
		<router-view></router-view>
		<!-- 底部-->
		<van-tabbar v-model="active" class="but">
		  <van-tabbar-item icon="home-o"><router-link class="tab-item" to="/First">首页</router-link></van-tabbar-item>
		  <van-tabbar-item icon="friends-o" @click="Community()">社区</van-tabbar-item>
		  <van-tabbar-item icon="user-o"><router-link class="tab-item" to="/Mine">个人中心</router-link></van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	import { videoPlayer } from 'vue-video-player'		//引用视频插件
	import 'video.js/dist/video-js.css'
	import {Toast} from 'vant'
	export default{
		name:"First",
		name: "my_video",
		props: {},
		data(){
			return{
				active:0,
				value:'',
				url:require("@/assets/comment.mp4"),
				options: {
				        playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
				        autoplay:false, // 是否自动播放
				        muted: false, // 是否静音
				        loop: true, // 是否开启循环播放
				        preload: "auto", // 自动预加载
				        language: "zh-CN", // 语言，'en', 'zh-cn', 'zh-tw'
				        aspectRatio: "16:9", // 播放器高宽占比（例如"16:9"或"4:3"）
				        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				        sources: [
				          {
				            type: "video/mp4", // 类型
				            src:require("@/assets/comment.mp4"),
							            // src: 'http://vjs.zencdn.net/v/oceans.mp4',
				
				              // "https://mp4i.vodfile.m1905.com/202011280727/c884af78f3467d3e7d65804b40c74771/video/2020/11/26/v20201126Z7OID3M29Z1FF6G3/v20201126Z7OID3M29Z1FF6G3.mp4", // url地址
				          },
				        ],
				        poster:"",				
							// require("@/assets/sky.jpg"),
				          // "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606462956126&di=2d87964d4faf656af55d09d938640d97&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201310%2F10%2F150326y7dzdd8d4kpjjdsd.jpg", // 封面地址
				        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
				        controlBar: {
				          timeDivider: true, // 是否显示当前时间和持续时间的分隔符，"/"
				          durationDisplay: true, // 是否显示持续时间
				          remainingTimeDisplay: false, // 是否显示剩余时间
				          fullscreenToggle: true, // 是否显示全屏按钮
				        },
				},
			};
		},
		// created(){
		// 	this.$router.push({path:'Index'})
		// },
		methods: {
		    Community(){
		    	this.$router.push({path:'Community'})
		    },
			onSearch(val) {				//调用模糊查询的接口
			    Toast(val);
			},
			onCancel() {
			    Toast('取消');
			},
			// 播放回调
			    onPlayerPlay($event) {
			      console.log("player play!", $event);
			    },
			    // 暂停回调
			    onPlayerPause($event) {
			      console.log("player pause!", $event);
			    },
			    // 视频播完回调
			    onPlayerEnded($event) {
			      console.log($event);
			    },
			    // DOM元素上的readyState更改导致播放停止
			    onPlayerWaiting($event) {
			      console.log($event);
			    },
			    // 已开始播放回调
			    onPlayerPlaying($event) {
			      console.log($event);
			    },
			    // 当播放器在当前播放位置下载数据时触发
			    onPlayerLoadeddata($event) {
			      console.log($event);
			    },
			    // 当前播放位置发生变化时触发。
			    onPlayerTimeupdate($event) {
			      console.log($event);
			    },
			    //媒体的readyState为HAVE_FUTURE_DATA或更高
			    onPlayerCanplay($event) {
			      // console.log('player Canplay!', player)
			    },
			    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
			    onPlayerCanplaythrough($event) {
			      // console.log('player Canplaythrough!', player)
			    },
			    //播放状态改变回调
			    playerStateChanged($event) {
			      console.log("player current update state", $event);
			    },
			    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
			    playerReadied() {
			      console.log("example player 1 readied");
			    },
		},
	}
</script>

<style scoped>
	.my-swipe .van-swipe-item {
	    color: #fff;
	    font-size: 20px;
	    line-height: 0px;
	    text-align: center;
	    background-color:#FAFAFA;
	  }
	.first{
		margin: 10px;
		background-color: #FAFAFA;
		height: 600px;
	}
	img{
		width:300px;
		height: 150px;
	}
	van-image{
		position: relative;
		left: 5px;
		top: 5px;
	}
	.my_video{
		display: inline-block;
		margin:10px;
		width: 43%;
	}
	.vjs-big-play-button {
	    background-color: rgba(0,0,0,0.45);
	    font-size: 1em;
	    /* border-radius: 50%; */
	    height: 2em !important;
	    line-height: 2em !important;
	    margin-top: -1em !important;
	}
	.but{
		position: fixed;
		bottom: 0px;
		z-index: 10;
	}
</style>
